import React, { useState, useEffect, useRef } from 'react';
import './index.less';
import { Chart } from '@antv/g2';

const Charts = (payload) => {
  const { salesData: data } = payload;
  const chartRef = useRef();
  const [chart, setChart] = useState(null);

  useEffect(() => {
    if (data && !chart) {
      const c = new Chart({
        container: 'c7',
        autoFit: true,
        // width: 500,
        padding: [10, 150, 50, 80],
        height: 550,
      });
      setChart(c);
    }
  }, [data]);

  useEffect(() => {
    chart && renderChart();
  }, [chart, data]);

  const renderChart = () => {
    const nums = data.map((i) => i.amount);
    const maxValue = Math.max(...nums);
    const max = Math.ceil(maxValue / 10) * 10;
    const counts = data.map((i) => i.count);
    const maxCountValue = Math.max(...counts);
    const maxCount = Math.ceil(maxCountValue / 10) * 10;

    const margin = 1 / 5;

    chart.clear();
    chart.data(data);

    chart.scale('count', {
      min: 0,
      max: maxCount,
      tickCount: 6,
      range: [0, 1 - margin / 2],
    });

    const tick = max / 5;
    let ticks = new Array(6).fill(null);
    ticks = ticks.map((i, t) => t * tick);

    chart.scale('amount', {
      min: 0,
      max: max,
      ticks: ticks,
      tickCount: 6,
      range: [0, 1 - margin / 2],
    });

    chart.scale('city', {
      min: 0,
      max: max,
      ticks: ticks,
      tickCount: 6,
      range: [0, 1 - margin / 2],
    });

    chart.scale('name', {
      nice: true,
    });

    chart.axis('city', {
      label: {
        formatter: () => '',
      },
    });

    chart.axis('amount', {
      title: {
        text: '单位: 元',
        autoRotate: false,
        position: 'end',
        offset: -10,
        textStyle: {
          textAlign: 'start',
          fontSize: '24',
          fontWeight: 'bold',
          textBaseline: 'top',
        },
      },
    });

    chart.axis('count', {
      title: {
        text: '单位: 笔',
        autoRotate: false,
        position: 'end',
        offset: -10,
        textStyle: {
          textAlign: 'start',
          fontSize: '24',
          fontWeight: 'bold',
          textBaseline: 'top',
        },
      },
    });

    chart.axis('name', {
      label: {
        autoRotate: true,
        autoHide: false,
      },
    });

    chart.interaction('active-region');
    // 柱状图设置
    chart
      .interval()
      .label('amount', {
        offset: -15,
      })
      .size(150)
      .position('name*amount')
      .tooltip('amount*count', (amount, count) => {
        return {
          amount,
          count,
        };
      })
      .color('city');
    chart.line().position('city').style({
      stroke: 'transparent',
    });

    chart.legend({
      custom: true,
      position: 'bottom',
      flipPage: false,
      items: [
        {
          name: '金额',
          marker: {
            symbol: 'square',
            style: {
              fill: '#6395f9',
            },
            clickable: false,
          },
        },
        {
          name: '笔数',
          marker: {
            symbol: 'circle',
            style: {
              fill: '#f59a23',
            },
            clickable: false,
          },
        },
      ],
    });

    const itemTpl = `
            <div class='chart7Tpl'>
                <div class='tpl'>
                    <span>笔数:&nbsp;&nbsp;&nbsp;{count} 笔</span>
                </div>
                <div class='tpl'>
                    <span>金额:&nbsp;&nbsp;&nbsp;{amount} 元</span>
                </div>
            </div>
        `;

    chart.tooltip({
      showTitle: true,
      showMarkers: false,
      itemTpl: itemTpl,
    });
    chart
      .line()
      .position('name*count')
      .size(4)
      .color('', () => '#f59a23')
      .tooltip('amount*count', (amount, count) => {
        return {
          amount,
          count,
        };
      });
    chart.removeInteraction('legend-filter');
    chart.render();
  };

  return (
    <div className={'chart7'}>
      <div id="c7" ref={chartRef} />
    </div>
  );
};

export default Charts;
